<template>
  <div>
    <!-- 轮播图 -->
    <carousel />
    <!-- 搜索框 -->
    <search />
    <el-row :gutter="20">
      <el-col :span="20">
        <!-- 等级 -->
        <level @onLevelChanged="onlevelchanged" />
        <!-- 区域 -->
        <region @onRegionChanged="onregionchanged" />
        <!-- 医院信息展示 -->
        <div class="hospital">
          <card class="item" :hospitalInfo="item" v-if="hasHospitalArr.length > 0" v-for="(item) in hasHospitalArr"
            :key="item.id" />
          <el-empty style="width: 100%;" v-else description="未查询到数据" />
        </div>
        <!-- 分页器 -->
        <el-pagination :page-sizes="[10, 20, 50]" v-model:current-page="pageNo" v-model:page-size="pageSize"
          style="margin: 0px 0px 10px 0px;" background layout="prev, pager, next,jumper,->,sizes,total " :total="total" />
      </el-col>
      <el-col :span="4">
        <tip />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// 引入组合式API函数
import { ref, onMounted, watch } from 'vue'
import { reqHospital } from '@/api/home'

import type { HospitalResponseData, Content } from '@/api/home/type'
import carousel from './carousel/index.vue'
import search from './search/index.vue'
import level from './level/index.vue'
import region from './region/index.vue'
import card from './card/index.vue'
import tip from './tip/index.vue'
let total = ref<number>(10)
let pageNo = ref<number>(1)
let pageSize = ref<number>(10)
let hasHospitalArr = ref<Content>([])
let hostype = ref<string>('')
let districtCode = ref<string>('')
// 组件挂载时使用
onMounted(() => {
  // 初始化时从服务器拉取数据
  getHospitalInfo()
})
// 获取医院信息列表
const getHospitalInfo = async () => {
  let result: HospitalResponseData = await reqHospital(pageNo.value, pageSize.value, hostype.value, districtCode.value)
  // 缓存医院信息数据
  hasHospitalArr.value = result.data.content
  //拿到总信息数
  total.value = result.data.totalElements
}
//切换医院等级
const onlevelchanged = (value: string) => {
  hostype.value = value
  getHospitalInfo();
}
//切换区域
const onregionchanged = (value: string) => {
  districtCode.value = value
  getHospitalInfo()
}
// 观察属性，此处v-model自动传值，所以，无须函数参数，用此方法省去了订阅组件事件的步骤
watch(pageNo, () => {
  getHospitalInfo();
})
watch(pageSize, () => {
  getHospitalInfo();
})

</script>

<style scoped lang="scss">
.hospital {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .item {
    width: 48%;
    margin: 10px 0px;
  }
}
</style>